<template>
  <div class="home">
    <el-row :gutter="20" style="margin-bottom:15px;">
      <el-col :span="3">
        <el-input :placeholder="$t('SYS.pleaseInput')+$t('schedule.beanName')" v-model="beanName"></el-input>
      </el-col>
      <el-col :span="$i18n.locale=='zh_cn'? 1.2 : 1.5" style="text-align:center;">
        <el-button @click="getDataList">{{$t('SYS.search')}}</el-button>
      </el-col>
      <el-col :span="$i18n.locale=='zh_cn'? 1.2 : 1.5" style="text-align:center;">
        <el-button type="primary" @click="addOrUpdateHandle()">{{$t('SYS.add')}}</el-button>
      </el-col>
      <el-col :span="$i18n.locale=='zh_cn'? 1.2 : 1.5" style="text-align:center;">
        <el-button type="danger" @click="deleteHandle()" :disabled="isDel">{{$t('SYS.del')}}</el-button>
      </el-col>
      <el-col :span="$i18n.locale=='zh_cn'? 1.2 : 1.5" style="text-align:center;">
        <el-button type="warning" @click="pauseHandle()">{{$t('schedule.pause')}}</el-button>
      </el-col>
      <el-col :span="$i18n.locale=='zh_cn'? 1.2 : 1.5" style="text-align:center;">
        <el-button type="success" @click="resumeHandle()">{{$t("schedule.resume")}}</el-button>
      </el-col>
      <el-col :span="$i18n.locale=='zh_cn'? 1.2 : 1.5" style="text-align:center;">
        <el-button type="info" @click="runHandle()">{{$t('schedule.run')}}</el-button>
      </el-col>
      <el-col :span="$i18n.locale=='zh_cn'? 1.2 : 1.5" style="text-align:center;">
        <el-button type="default" @click="getLogList">{{$t('schedule.log')}}</el-button>
      </el-col>
    </el-row>
    <el-table
    ref="multipleTable"
    :data="tableData"
    v-loading="dataLoading"
    @selection-change="dataListSelectionChangeHandle"
    stripe
    border
    row-key="id"
    :header-row-style="{'color':'#409EFF'}"
    style="width: 100%;margin-bottom:15px;">
      <el-table-column :reserve-selection="true" type="selection" align="center" width="50"></el-table-column>
      <el-table-column
        prop="beanName"
        :label="$t('schedule.beanName')"
        align="center"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="params"
        :label="$t('schedule.params')"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cronExpression"
        :label="$t('schedule.cronExpression')"
        align="center"
        width="240">
      </el-table-column>
      <el-table-column
        prop="remark"
        :label="$t('schedule.remark')"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        :label="$t('schedule.status')"
        sortable="custom"
        align="center"
        >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" size="small">{{$t('schedule.status1')}}</el-tag>
          <el-tag v-else size="small" type="danger">{{$t('schedule.status0')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('SYS.operation')"  align="center" width="300">
        <template slot-scope="scope">
          <el-dropdown  @command="handelCommand" trigger="click">
            <el-button type="primary">
              {{$t('SYS.chooseOperation')}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="width:120px">
              <el-dropdown-item :command="{name:'edit',id:scope.row.id}" ><p style="color:#E6A23C;text-align:center;">{{$t('SYS.edit')}}</p></el-dropdown-item>
              <el-dropdown-item :command="{name:'pause',id:scope.row.id}"><p style="color:#E6A23C;text-align:center;">{{$t('schedule.pause')}}</p></el-dropdown-item>
              <el-dropdown-item :command="{name:'resume',id:scope.row.id}"><p style="color:#67C23A;text-align:center;">{{$t('schedule.resume')}}</p></el-dropdown-item>
              <el-dropdown-item :command="{name:'run',id:scope.row.id}"><p style="color:#409EFF;text-align:center;">{{$t('schedule.run')}}</p></el-dropdown-item>
              <el-dropdown-item :command="{name:'del',id:scope.row.id}"><p style="color:#F56C6C;text-align:center;">{{$t('SYS.del')}}</p></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes,total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <addUpdate v-if="isShow" :id="rowId" ref="addUpdate" @closedDialog="closedDialog" @hasSubmit="hasSubmit"></addUpdate>
    <logList v-if="showLogList" ref="logList" @closedDialog="closedLogListDialog"></logList>
  </div>
</template>

<script>
import addUpdate from "./components/add-update.vue"
import logList from "./components/log-list.vue"
import axios from "axios"
import Cookies from "js-cookie";
export default {
  components:{addUpdate,logList},
  data(){
    return{
      isDel:false,
      isShow:false,
      showLogList:false,
      dataLoading:false,
      tableData:[],
      page:1,
      limit:10,
      total:0,
      multipleSelection:[],
      beanName:"",
      rowId:""
    }
  },
  mounted(){
    this.getDataList()
  },
  methods:{
    // 展示日志列表
    getLogList(){
      this.showLogList = true
      this.$nextTick(()=>{
        this.$refs.logList.init()
      })
    },
    closedDialog(){
      this.isShow = false
      this.rowId = ""
    },
    // 已经提交更新数据
    hasSubmit(){
      this.getDataList()
    },
    closedLogListDialog(){
      this.showLogList = false
    },
    handelCommand(val){
      switch (val.name) {
        case "edit":
          this.addOrUpdateHandle(val.id)
          break;
        case "pause":
          this.pauseHandle(val.id)
          break;
        case "resume":
          this.resumeHandle(val.id)
          break;
        case "run":
          this.runHandle(val.id)
          break;
        case "del":
          this.deleteHandle(val.id)
          break;
        default:
          break;
      }
    },
    dataListSelectionChangeHandle(val){
      this.multipleSelection = val
    },
    addOrUpdateHandle(id){
      if (id) this.rowId = id;
      this.isShow = true
      this.$nextTick(()=>{
        this.$refs.addUpdate.init()
      })
    },
    pauseHandle(id){
      if(id){
        this.pauseRequest(id)
      }else{
        if(this.multipleSelection.length == 0){
          return this.$message.warning(this.$t('SYS.chooseFirst'))
        }
        this.pauseRequest()
      }
    },
    pauseRequest(id){
      this.$confirm(this.$t("SYS.is")+this.$t('schedule.pause')+'?', this.$t('SYS.tip'), {
          confirmButtonText: this.$t('SYS.check'),
          cancelButtonText: this.$t('SYS.cancel'),
          type: 'warning',
          closeOnClickModal:false
        }).then(()=>{
          if(!id){
            this.isDel = true
          }
          this.$http.put(this.$baseUrl.sysSchedulePause,id ? [id] : this.multipleSelection.map(item => item.id)).then(({data})=>{
            if(data.code!=0){
              return this.$message.error(data.msg)
            }
            this.isDel = false
            this.$message.success(this.$t('schedule.pause')+this.$t('schedule.success'))
            this.multipleSelection = []
            this.$refs.multipleTable.clearSelection()
            this.getDataList()
          }).catch((err)=>{
            this.isDel = false
            this.$message.error($t('request.serverError'))
          })
        }).catch(()=>{})

    },
    resumeHandle(id){
      if(id){
        this.resumeRequest(id)
      }else{
        if(this.multipleSelection.length == 0){
          return this.$message.warning(this.$t('SYS.chooseFirst'))
        }
        this.resumeRequest()
      }
    },
    resumeRequest(id){
      this.$confirm(this.$t("SYS.is")+this.$t('schedule.resume')+'?', this.$t('SYS.tip'), {
        confirmButtonText: this.$t('SYS.check'),
        cancelButtonText: this.$t('SYS.cancel'),
        type: 'warning',
        closeOnClickModal:false
      }).then(()=>{
        this.$http.put(this.$baseUrl.sysScheduleResume,id ? [id]:this.multipleSelection.map((item)=>{
            return item.id
          })).then(({data:res})=>{
          if(res.code!=0){
            return this.$message.error(res.msg)
          }
          this.$message.success(this.$t('schedule.resume')+this.$t('schedule.success'))
          this.multipleSelection = []
          this.$refs.multipleTable.clearSelection()
          this.getDataList()
        }).then((err)=>{
        })
      }).catch(()=>{})
    },
    runHandle(id){
      if(id){
        this.runRequest(id)
      }else{
        if(this.multipleSelection.length == 0){
          return this.$message.warning(this.$t('SYS.chooseFirst'))
        }
        this.runRequest()
      }
    },
    runRequest(id){
      this.$confirm(this.$t("SYS.is")+this.$t('schedule.run')+'?', this.$t('SYS.tip'), {
        confirmButtonText: this.$t('SYS.check'),
        cancelButtonText: this.$t('SYS.cancel'),
        type: 'warning',
        closeOnClickModal:false
      }).then(()=>{
        this.$http.put(this.$baseUrl.sysScheduleRun,id?[id]:this.multipleSelection.map((item)=>{
            return item.id 
          })).then(({data:res})=>{
          if(res.code!=0){
            return this.$message.error(res.msg)
          }
          this.$message.success(this.$t('schedule.run')+this.$t('schedule.success'))
          this.multipleSelection = []
          this.$refs.multipleTable.clearSelection()
          this.getDataList()
        }).then((err)=>{
        })
      }).catch(()=>{})
    },
    deleteRequest(id){
      this.$confirm(this.$t("SYS.is")+this.$t('SYS.del')+'?', this.$t('SYS.tip'), {
        confirmButtonText: this.$t('SYS.check'),
        cancelButtonText: this.$t('SYS.cancel'),
        type: 'warning',
        closeOnClickModal:false
      }).then(()=>{
        this.$http.delete(this.$baseUrl.delSysSchedule,{
          data: id?[id]:this.multipleSelection.map((item)=>{
            return item.id
          })
        }).then(({data:res})=>{
          if(res.code!=0){
            return this.$message.error(res.msg)
          }
          this.$message.success(this.$t('SYS.del')+this.$t('schedule.success'))
          this.multipleSelection = []
          this.$refs.multipleTable.clearSelection()
          this.getDataList()
        }).then((err)=>{
        })
      }).catch(()=>{})

    },
    deleteHandle(id){
      if(id){
        this.deleteRequest(id)
      }else{
        if(this.multipleSelection.length == 0){
          return this.$message.warning(this.$t('SYS.chooseFirst'))
        }
        this.deleteRequest()
      }
    },
    handleSizeChange(val){
      this.limit = val
      this.getDataList()
    },
    handleCurrentChange(val){
      this.getDataList()
    },
    // 获取列表
    getDataList(){
      this.dataLoading = true
      this.$http.get(this.$baseUrl.sysSchedulePage,{
        params:{
          order:"",
          orderField:"",
          page:this.page,
          limit:this.limit,
          beanName:this.beanName
        }
      }).then((res)=>{
        this.dataLoading = false
        if(res.data.code!=0){
          return this.$message.error(res.data.msg)
        }
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      }).catch(()=>{
        this.dataLoading = false
      })
    }
  }
};
</script>
